<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8" />
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    a {
      text-decoration: none;
      color: #721c24;
    }

    h1 {
      text-align: center;
      color: #333;
      margin: 20px 0;
    }

    table {
      margin: 0 auto;
      width: 800px;
      border-collapse: collapse;
      color: #004085;
    }

    th {
      padding: 10px;
      background: #cfe5ff;

      font-size: 20px;
      font-weight: 400;
    }

    td,
    th {
      border: 1px solid #b8daff;
    }

    td {
      padding: 10px;
      color: #666;
      text-align: center;
      font-size: 16px;
    }

    tbody tr {
      background: #fff;
    }

    tbody tr:hover {
      background: #e1ecf8;
    }

    .info {
      width: 900px;
      margin: 50px auto;
      text-align: center;
    }

    .info input {
      width: 80px;
      height: 25px;
      outline: none;
      border-radius: 5px;
      border: 1px solid #b8daff;
      padding-left: 5px;
    }

    .info button {
      width: 60px;
      height: 25px;
      background-color: #004085;
      outline: none;
      border: 0;
      color: #fff;
      cursor: pointer;
      border-radius: 5px;
    }

    .info .age {
      width: 50px;
    }
  </style>
</head>

<body>
  <h1>新增人员</h1>
  <form action="">
    <div class="info">
      姓名：<input type="text" class="uname" /> 年龄：<input type="text" class="age" />
      性别:
      <select name="gender" id="" class="gender">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
      工资：<input type="text" class="salary" /> 城市：<select name="city" id="" class="city">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
        <option value="曹县">曹县</option>
      </select>
      <button class="add">录入</button>
    </div>
  </form>

  <h1>工资风云榜</h1>
  <table>
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>薪资</th>
        <th>城市</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody></tbody>
          <!--
          模板数据
          <tr>
            <td>stuId</td>
            <td>uname</td>
            <td>age</td>
            <td>gender</td>
            <td>salary</td>
            <td>city</td>
            <td>
              <button class="up" data-id= "stuId">上移</button>
              <button class="down" data-id= "stuId">下移</button>
              <button class="delete" data-id= "stuId">删除</button>
            </td>
          </tr>
       -->
  </table>
  <script>
    //准备好数据后端的数据
    let arr = [{
        stuId: 1001,
        uname: "冯诺依曼",
        age: 19,
        gender: "男",
        salary: "20000",
        city: "纽约"
      },
      {
        stuId: 1002,
        uname: "秦始皇",
        age: 65,
        gender: "男",
        salary: "infinte",
        city: "秦国"
      }
      ,
      {
        stuId: 1003,
        uname: "罗辑",
        age: 23,
        gender: "男",
        salary: "20000",
        city: "北京"
      },
      {
        stuId: 1004,
        uname: "丁仪",
        age: 36,
        gender: "男",
        salary: "35000",
        city: "北京"
      }
    ]
    
    let tbody = document.querySelector('tbody');
    // 将数组中的数据动态渲染到表格里
    
    renderData();

    function renderData(){
      // 渲染前先清空
      tbody.innerHTML = "";
      arr.forEach((item, index) => {
      let tr = document.createElement('tr');
      tr.innerHTML = `
              <td>${arr[index].stuId}</td>
              <td>${arr[index].uname}</td>
              <td>${arr[index].age}</td>
              <td>${arr[index].gender}</td>
              <td>${arr[index].salary}</td>
              <td>${arr[index].city}</td>
              <td>
                <button class="up" data-id= "${arr[index].stuId}">上移</button>
                <button class="down" data-id= "${arr[index].stuId}">下移</button>
                <button class="delete" data-id= "${arr[index].stuId}">删除</button>
              </td>
        `;
      tbody.appendChild(tr);
      });
    }

    document.querySelector('.add').addEventListener('click', e =>{
      // 阻止form表单自带的提交跳转功能
      e.preventDefault();
      // 新增人员模块
      let studentId = + arr[arr.length-1].stuId+1; //学号，使用数组最后一个的值+1
      let uname = document.querySelector('.uname').value.trim();
      let age = +document.querySelector('.age').value.trim();
      let gender = document.querySelector('.gender').value;
      let salary = +document.querySelector('.salary').value.trim();
      let city = document.querySelector('.city').value;

      // 阻止空表单提交
      if(uname === 0 || age === 0 || salary === 0){
        alert('表单内容不能为空');
        return;
      }
      arr.push(
        {
          stuId: studentId++,
          uname: uname,
          age: age,
          gender: gender,
          salary: salary,
          city: city
        }
      );
      renderData();
      // 当输入的内容提交后，重置表单内容
      document.querySelector('form').reset();
    })

    // 操作模块
    tbody.addEventListener('click', e =>{
      console.log(e.target.className);
      // 上移操作
      if(e.target.className === 'up'){
        let stu_id = +e.target.getAttribute('data-id');
        let index = 0;
        for(let i = 0; i < arr.length; i++){
          if(stu_id === arr[i].stuId){
            console.log(stu_id,arr[i].stuId,i);
            index = i;
            console.log(index);
            break;
            // 当遍历找到之后，直接退出循环，无需继续查找
          }
        }
        if(index === 0){
          alert('当前已经是第一行了，无需上移');
        }else{
          // 通过【冒泡排序】交换两个数
          let tmp = arr[index];
          arr[index] = arr[index -1];
          arr[index -1] = tmp;
        }
        renderData();
      }

      // 下移模块
      if(e.target.className === 'down'){
        let stu_id = +e.target.getAttribute('data-id');
        let index = 0;
        for(let i = 0; i < arr.length; i++){
          if(stu_id === arr[i].stuId){
            console.log(stu_id,arr[i].stuId,i);
            index = i;
            console.log(index);
            break;
            // 当遍历找到之后，直接退出循环，无需继续查找
          }
        }
        if(index === arr.length-1){
          alert('当前已经是最后一行了，无需下移');
        }else{
          // 通过【冒泡排序】交换两个数
          let tmp = arr[index];
          arr[index] = arr[index + 1];
          arr[index + 1] = tmp;
        }
        renderData();
      }
      // 删除模块
      if(e.target.className === 'delete'){
        let stu_id = +e.target.getAttribute('data-id');
        let index = 0;
        for(let i = 0; i < arr.length; i++){
          if(stu_id === arr[i].stuId){
            index = i;
            console.log(index);
            break;
            // 当遍历找到之后，直接退出循环，无需继续查找
          }
        }
        arr = arr.filter((item,index)=>{
          console.log(arr);
          return stu_id != arr[index].stuId;
        });
        renderData();
      }


    });
    

    
   



    


  </script>
</body>

</html>